<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>dd { display: none; }</style>
<script>
	function id(name){
		return document.getElementById(name);
	}
	
	function tag(name,elem){
		return (elem||document).getElementsByTagName(name);
	}
	function prev(elem){
		
		do{
			elem = elem.previousSibling;	
		}while(elem && elem.nodeType !=1);
		return elem;
	};
	
	function next(elem){
		do{
			elem  = elem.nextSibling;
		}while(elem&&elem.nodeType !=1 );		
		return elem;
	}
	
	function attr(elem,name,value){
		if(!name||name.constructor != String){
			return "";
		}		
		name = {"for":"htmlFor","class":"className"}[name]||name;		
		if(value != null){
			elem[name] = value;
			if(elem.setAttribute){
				elem.setAttribute(name,value);
			}
		}		
		return elem[name]||elem.getAttribute(name)||"";
	}
	
	function domReady(){
		var dt=tag("dt");
		for(var i=0;i<dt.length;i++){
			dt[i].addEventListener("click",function(){   //dt 이벤트 리스너 등록
				var open = attr(this,"open");				// 최초값 ""
				next(this).style.display =  open?'none':'block';  //open = "" -> block  => dd.style.display='block';
				attr(this,"open",open?"":"yes");					//open ="" -> yes
			},false);
		}
	}
		
	
	window.onload=function(e){
		domReady();
	}
</script>
</head>
<body>
   <h1>Expandable Definition List</h1>
    <dl>
        <dt>Cats</dt>
        <dd>A furry, friendly, creature.</dd>
        <dt>Dog</dt>
        <dd>Like to play and run around.</dd>
        <dt>Mice</dt>
        <dd>Cats like to eat  them.</dd>
    </dl>
</body>
</html>